body {
overflow: overlay;
}

.allow-drag {
    -webkit-app-region: drag;
}

.forbid-drag {
    -webkit-app-region: no-drag;
}


.pointer {
    cursor: pointer;
}

.margin-top30{
    margin-top: 30px;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.text-center {
    text-align: center;
}

.relative {
    position: relative !important;
}

[ripple], button {
    position: relative;
    transform: translate3d(0, 0, 0);
    overflow: hidden;
}

[ripple]:after, button:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, #666 20%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10, 10);
    opacity: 0;
    transition: transform .3s, opacity .5s;
}

[ripple]:active:after, button:active:after {
    transform: scale(0, 0);
    opacity: .3;
    transition: 0s;
}


.fade-enter,
.fade-leave-active {
    opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s;
}


.drop-down-icon {
    position: absolute;
    content: '';
    right: 20px;
    top: 26px;
    display: inline-block;
    height: 3px;
    width: 3px;
    border-width: 1px 1px 0 0;
    border-color: #8E909F;
    border-style: solid;
    margin-top: -9px;
    transform: rotate(135deg) scale(1.8);

}

.drop-down-icon-rotate {
    transform: rotate(225deg) scale(1.8);
    transition: all .2s;
}

.drop-down-icon-rotate-back {
    transform: rotate(135deg) scale(1.8);
    transition: all .2s;
}


.drop-right-menu-enter-active {
    transition: all .3s ease;
}

.drop-right-menu-leave-active {
    width: 300px;
    transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}

.drop-right-menu-enter, .drop-right-menu-leave-to {
    transform: translateX(-5px);
    width: 0;
}

.vertical-middle {
    vertical-align: middle;

}

.overflow-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.loading-icon {
    height: 20px;
    width: 20px;
    -webkit-animation: myRotate 1s linear infinite;
    animation: myRotate 1s linear infinite;
}

@-webkit-keyframes myRotate {
    0% {
        -webkit-transform: rotate(0deg);
    }
    50% {
        -webkit-transform: rotate(180deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes myRotate {
    0% {
        -webkit-transform: rotate(0deg);
    }
    50% {
        -webkit-transform: rotate(180deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}
